<template>
	<div class="change-password-page full box relative flex-col bg-primary p-safe">
		<div class="form-wrapper">
			<div class="form-box">
				<div class="form-item">
					<span class="form-label">当前密码：</span>
					<input class="form-input" v-model="oldPassword" type="password" placeholder="请输入当前密码" />
				</div>
				<div class="form-item">
					<span class="form-label">修改密码：</span>
					<input class="form-input" v-model="password" type="password" placeholder="请输入密码6位以上" />
				</div>
				<div class="form-item">
					<span class="form-label">确认密码：</span>
					<input class="form-input" v-model="passwordConfirm" type="password" placeholder="请确认密码" />
				</div>
			</div>
		</div>
		<div class="footer-wrap">
			<u-button type="primary" shape="circle" @click="handleConfirm">确认修改并重新登录</u-button>
		</div>
	</div>
</template>

<script>
	import { center as getUserInfo } from '@/utils/index.js'
	import { showLoading, toast, request } from '@/utils/tool'
	import { logout } from '@/utils/login.js'
	export default {
		data() {
			return {
				password: "",
				passwordConfirm: "",
				oldPassword: "",
				userInfo: {}
			}
		},
		onLoad() {
			this.initData()
		},
		methods: {

			async initData() {
				const token = uni.getStorageSync("token")
				if (!token) return uni.showModal({
					title: "错误提示",
					content: "您的登录凭证已过期，请重新登录",
					showCancel: false,
					confirmText: "确定",
					complete: () => {
						uni.reLaunch({
							url: "/pages/login"
						})
					}
				})
				const hide = showLoading("正在获取")
				const resp = await getUserInfo().catch(hide)
				hide()
				const userInfo = resp.data
				this.userInfo = userInfo
			},
			async handleConfirm() {
				const { password, passwordConfirm, oldPassword } = this
				if (!oldPassword) return toast({ title: "请输入当前密码" })
				if (!password) return toast({ title: "请输入密码" })
				if (!passwordConfirm) return toast({ title: "请确认密码" })
				if (password !== passwordConfirm) return toast({ title: "两次密码不一致" })
				const hide = showLoading("正在修改")
				const resp = await request({
					url: "/user/changePassword",
					data: {
						password,
						password_confirm: passwordConfirm,
						old_password: oldPassword
					}
				}).catch(hide)
				hide()
				if (resp.code !== 1) return
				toast({ title: "修改成功", icon: "success" }, () => {
					logout()
					uni.reLaunch({
						url: "/pages/login"
					})
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.change-password-page {
		.footer-wrap {
			padding: 0 64rpx;
			margin: auto 0 24rpx;
		}

		.form-wrapper {
			padding: 32rpx;
		}

		box-sizing: border-box;

		.form-box {
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			background: #fff;

			.form-item {
				display: flex;
				align-items: center;
				padding: 26rpx 32rpx;
				box-sizing: border-box;

				.form-input {
					font-size: 32rpx;
					line-height: 44rpx;
					flex: 1;
				}

				.form-label {
					font-weight: 400;
					font-size: 32rpx;
					color: rgba(0, 0, 0, 0.9);
					line-height: 44rpx;
					margin-right: 10rpx;
				}
			}
		}
	}
</style>